<!-- 屏幕自适应插件下载：cnpm i --save lib-flexible -->

<template>

  <div id="cesiumContainer">
    <div class="leftbox" ref="leftbox">  
    <div ref="myChart1" class="myChart1">表格1</div>
    <div ref="myChart2" class="myChart2">表格2</div>
    <div ref="myChart3" class="myChart3">表格3</div>
    </div>
    <div class="rightbox" ref="rightbox">    
    <div ref="myChart4" class="myChart4">表格4</div>
    <div ref="myChart5" class="myChart5">表格5</div>
    <div ref="myChart6" class="myChart6">表格6</div>
    </div>
       <div ref="infopopup"  class="infopopup"></div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
// import axios from 'axios'
export default {
  data() {
    return {
      viewer: null,
          };
  },
  methods: {
    // 初始化 cesium 应用程序
    initViewer() {
      var esri = new Cesium.ArcGisMapServerImageryProvider({ //此处为ArcGIS的数据源
            url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        })
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MTkxODY3Zi1iZTNiLTRlZjktOTIzNS04OGRiYTUxYmNkYjYiLCJpZCI6ODY2NjAsImlhdCI6MTY0NzkzODYwOX0.nue7HAVvjO5gEa9D0MbmGn34kPV8U6rSdfsgi76Sf0Y";
      console.log(this);
      this.viewer = new Cesium.Viewer("cesiumContainer",{
            infoBox:false,//隐藏右上角的id信息窗
            selectionIndicator: false,
            baseLayerPicker:false,  //将原来的底图隐藏
            imageryProvider:esri,   //提供新的底图来源
            terrainProvider:new Cesium.CesiumTerrainProvider({ //添加地形数据，获取地形数据的访问权限，CesiumTerrainProvider将地形数据转化为Cesium可以访问的数据
                url:Cesium.IonResource.fromAssetId(1), //放地形服务器的地址
                requestVertexNormals:true,      // 增加法线  提高光照效果
                requestWaterMask:true           //增加水面特效

            }),
            animation:false,//左下角播放事件动画的按钮
            timeline:false,//隐藏时间轴
      });
       // 修改homeButton的默认返回位置
      var _this = this;
      this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e) {
          e.cancel = true;
          _this.viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.5,36.7,300000),
          })
      })


      //加载延河流域轮廓geojson数据格式
      this.viewer.dataSources.add( 
        Cesium.GeoJsonDataSource.load('./yanhe_line.geojson')
      )
      this.viewer.camera.flyTo({
            destination:Cesium.Cartesian3.fromDegrees(109.5,36.7,300000), //设定相机的目的地
            orientation:{
                heading:Cesium.Math.toRadians(0),      //heading空值视口方向的水平旋转，也就是沿着Y轴旋转 0为正北方向；，Y为左右，Z为翻转
                pitch:Cesium.Math.toRadians(-90), //pitch空值沿着X轴，为上下旋转 ，-90为俯视
                roll:0  //翻转
            },
            duration:1 //设置飞行时间
        })
 },
    addPoints() {
       var dataa = [
        {id:0,
        position:Cesium.Cartesian3.fromDegrees(109.92,36.62138889,950),
        vegetation:['狼牙刺','荛花'],
        cover:78,
        lng:109.92,
        lat:36.62138889,
        asl:950,
        slop:14,
        asp:'219西南',



        },
        {id:1,
        position:Cesium.Cartesian3.fromDegrees(109.9197222,36.60444444,940),
        vegetation:['狼牙刺','野枣树','柳叶酥梨'] ,
        cover:75,
        lng:109.9197222,
        lat:36.60444444,
        asl:940,
        slop:38,
        asp:'237西南',
        
        },
        {id:2,
        position:Cesium.Cartesian3.fromDegrees(109.9219444,36.60416667,910),
        vegetation:['狼牙刺','野枣树','荛花','杠柳'],
        cover:75,
        lng:109.9219444,
        lat:36.6041666,
        asl:910,
        slop:18,
        asp:'',
        
        },
          {id:3,
        position:Cesium.Cartesian3.fromDegrees(109.931944444444	,36.5741666666667,	940),
        vegetation:['野枣树','荛花','狼牙刺','草木樨状黄芪','焦蒿'],
        cover:56,
           lng:109.931944444444,
        lat:36.5741666666667,
        asl:940,
        slop:26,
        asp:'214西南',
        
        },
          {id:4,
        position:Cesium.Cartesian3.fromDegrees(109.9316667	,36.57361111	,910),
        vegetation:['狼牙刺','野枣树','荛花'],
        cover:73,
           lng:109.9316667,
        lat:36.57361111,
        asl:910,
        slop:26,
        asp:'227西南',
        
        },
          {id:5,
        position:Cesium.Cartesian3.fromDegrees(109.931111111111,	36.5727777777778,	890),
        vegetation:['荆条','野枣树'],
        cover:28,
           lng:109.931111111111,
        lat:36.5727777777778,
        asl:890,
        slop:0,
        asp:'',
        },
          {id:6,
        position:Cesium.Cartesian3.fromDegrees(110.037222222222	,36.4347222222222	,1190),
        vegetation:['锦鸡儿','黄刺玫','杜梨','丁香','水栒子','土状绣线菊'],
        cover:87,
           lng:110.037222222222,
        lat:36.4347222222222,
        asl:1190,
        slop:46,
        asp:'北坡',
        },
          {id:7,
        position:Cesium.Cartesian3.fromDegrees(110.037222222222	,36.435	,1190),
        vegetation: ['丁香','锦鸡儿','绣线菊','黄刺玫','黑栒子','水栒子'],
        cover:86,
           lng:110.037222222222,
        lat:36.435,
        asl:1190,
        slop:36,
        asp:'北坡',
        },
          {id:8,
        position:Cesium.Cartesian3.fromDegrees(110.036944444444	,36.435	,1184),
        vegetation: ['黑栒子','黄刺玫','锦鸡儿','丁香'],
        cover:73,
           lng:110.036944444444,
        lat:36.435,
        asl:1184,
        slop:34,
        asp:'北坡',
        },
          {id:9,
        position:Cesium.Cartesian3.fromDegrees(110.033611111111,	36.4391666666667	,1140),
        vegetation: ['杏树','灌木铁线莲','柳叶酥梨','丁香','狼牙刺','野枣树'],
        cover:78,
           lng:110.033611111111,
        lat:36.4391666666667,
        asl:1140,
        slop:35,
        asp:'西偏南',
        },
          {id:10,
        position:Cesium.Cartesian3.fromDegrees(110.033333333333,	36.4391666666667,	1140),
        vegetation:['柳叶酥梨','狼牙刺','灌木铁线莲','杠柳'],
        cover:76,
           lng:110.033333333333,
        lat:36.4391666666667,
        asl:1140,
        slop:37,
        asp:'西偏南',
        },
          {id:11,
        position:Cesium.Cartesian3.fromDegrees(110.033333333333	,36.4388888888889,	1130),
        vegetation: ['杠柳','狼牙刺','灌木铁线莲','柳叶酥梨'],
        cover:86,
             lng:110.033333333333,
        lat:36.4388888888889,
        asl:1130,
        slop:40,
        asp:'南偏西',
        },
          {id:12,
        position:Cesium.Cartesian3.fromDegrees(109.932777777778	,36.5177777777778	,970),
        vegetation:['丁香','黄刺玫','绣线菊','梨树'],
        cover:79,
           lng:109.932777777778,
        lat:36.5177777777778,
        asl:970,
        slop:42,
        asp:'',
        },
          {id:13,
        position:Cesium.Cartesian3.fromDegrees(109.9327778,36.51555556,950),
        vegetation:['丁香','牛奶子','柳叶酥梨'],
        cover:33,
          lng:109.9327778,
        lat:36.51555556,
        asl:950,
        slop:34,
        asp:'',
        },
          {id:14,
        position:Cesium.Cartesian3.fromDegrees(109.9333333,36.5175,920),
        vegetation:['黑栒子','黄刺玫','丁香','醉鱼草','延安锦鸡儿'],
        cover:67,
        lng:109.9333333,
        lat:36.5175,
        asl:920,
        slop:22,
        asp:'',
        },
          {id:15,
        position:Cesium.Cartesian3.fromDegrees(109.9197222,36.50305556,1000),
        vegetation:['荆条','狼牙刺','野枣树'],
        cover:68,
          lng:109.9197222,
        lat:36.50305556,
        asl:1000,
        slop:11,
        asp:'236西南',
        },
          {id:16,
        position:Cesium.Cartesian3.fromDegrees(109.9208333,36.50222222,940),
        vegetation: ['狼牙刺','荆条'],
        cover:37,
           lng:109.9208333,
        lat:36.50222222,
        asl:960,
        slop:18.5,
        asp:'334西北',
        
        },
          {id:17,
        position:Cesium.Cartesian3.fromDegrees(109.9216667,36.50166667,940),
        vegetation: ['荆条','杠柳','锦鸡儿','柳叶酥梨','丁香'],
        cover:31,
           lng:109.9216667,
        lat:36.50166667,
        asl:940,
        slop:11,
        asp:'154东南',
        
        },
          {id:18,
        position:Cesium.Cartesian3.fromDegrees(109.9144444,36.57694444,860),
        vegetation: ['荆条','锦鸡儿','丁香'],
        cover:65,
           lng:109.9144444,
        lat:36.57694444,
        asl:860,
        slop:17,
        asp:'北坡',
        
        },
          {id:19,
        position:Cesium.Cartesian3.fromDegrees(109.9147222,36.57694444,940),
        vegetation: ['荆条','丁香','杜梨','三角槭','锦鸡儿'],
        cover:92,
           lng:109.9147222,
        lat:36.57694444,
        asl:850,
        slop:45,
        asp:'334北坡',
        
        },
          {id:20,
        position:Cesium.Cartesian3.fromDegrees(109.9147222,36.57722222,840),
        vegetation: ['杏树','榆树','狼牙刺','野桃树'],
        cover:91,
        lng:109.9147222,
        lat:36.57722222,
        asl:840,      
        slop:27,
        asp:'326西北',
        
        },
          {id:21,
        position:Cesium.Cartesian3.fromDegrees(109.5141667,36.45277778,1210),
        vegetation: ['野桃树','狼牙刺','榆树'],
           lng:109.5141667,
        lat:36.45277778,
        asl:1210,
        slop:32,
        asp:'南坡',
        
        },
          {id:22,
        position:Cesium.Cartesian3.fromDegrees(109.5141667,36.45277778,1200),
        vegetation: ['榆树','狼牙刺'],
         lng:109.5141667,
        lat:36.45277778,
        asl:1200,
        slop:22,
        asp:'南坡',
        },
          {id:23,
        position:Cesium.Cartesian3.fromDegrees(109.5141667,36.4525,1180),
        vegetation: ['醉鱼草','延安锦鸡儿','结皮忍冬','黄刺玫','牛奶子','梨树'],
           lng:109.5141667,
        lat:36.62138889,
        asl:1180,
        slop:12,
        asp:'240西南',
        },
          {id:24,
        position:Cesium.Cartesian3.fromDegrees(108.8644444,36.68055556,1570),
        vegetation:['土状绣线菊','黄刺玫','牛奶子','绣线菊'],
           lng:108.8644444,
        lat:36.68055556,
        asl:1570,
        slop:10,
        asp:'北坡',
        },
          {id:25,
        position:Cesium.Cartesian3.fromDegrees(108.8644444,36.68083333,1560),
        vegetation: ['黄刺玫','柳叶酥梨'],
           lng:108.8644444,
        lat:36.68083333,
        asl:1560,
        slop:18,
        asp:'北坡',
        },
          {id:26,
        position:Cesium.Cartesian3.fromDegrees(108.8641667,36.68111111,1560),
        vegetation: ['狼牙刺','醉鱼草','灌木铁线莲','杠柳'],
           lng:108.8641667,
        lat:36.68111111,
        asl:1560,
        slop:15,
        asp:'北坡',  
        },
          {id:27,
        position:Cesium.Cartesian3.fromDegrees(108.8641667,36.67833333,1570),
        vegetation: ['狼牙刺','醉鱼草','灌木铁线莲','杠柳'] ,
           lng:108.8641667,
        lat:36.67833333,
        asl:1570,
        slop:0,
        asp:'南坡',      
        },
           {id:28,
        position:Cesium.Cartesian3.fromDegrees(108.8638889,36.67777778,1550),
        vegetation: ['狼牙刺'] ,
           lng:108.8638889,
        lat:36.67777778,
        asl:1550,
        slop:5,
        asp:'南坡',      
        },
        ]; 
  

       
              
               for(var i =0;i<=dataa.length;i++){
                  this.viewer.entities.add({
                    id:dataa[i].id,
                    position:dataa[i].position,//经纬度高度
                    // point:{
                    //     pixelSize:5,
                    //     color:new Cesium.Color(0,1,0,1)
                    // },
                    billboard:{
                      image:require('../../public/image/(227)2000x2000.png'),
                      show:true,
                      scale:0.8,
                      // color: Cesium.Color.WHITE.withAlpha(0.8),
                      height: 50,
                      width: 50,
                      // rotation: 20,
                      sizeInMeters: false,
                      verticalOrigin: Cesium.VerticalOrigin.CENTER,
                      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                      pixelOffset: new Cesium.Cartesian2(0, 0),

                    },

                    // 设置标签的大小位置颜色
                    // label:{ 
                    // text:res.data[i].classofvegetation,
                    // font:'20px Helvetica',
                    // fillColor:Cesium.Color.WHITE,
                    // },
              });
          }
        
  
      },
    //添加鼠标左键单击事件
      leftClick() {   
                var dataa = [
        {id:0,
        position:Cesium.Cartesian3.fromDegrees(109.92,36.62138889,950),
        vegetation:['狼牙刺','荛花'],
        cover:78,
        lng:109.92,
        lat:36.62138889,
        asl:950,
        slop:14,
        asp:'219西南',



        },
        {id:1,
        position:Cesium.Cartesian3.fromDegrees(109.9197222,36.60444444,940),
        vegetation:['狼牙刺','野枣树','柳叶酥梨'] ,
        cover:75,
        lng:109.9197222,
        lat:36.60444444,
        asl:940,
        slop:38,
        asp:'237西南',
        
        },
        {id:2,
        position:Cesium.Cartesian3.fromDegrees(109.9219444,36.60416667,910),
        vegetation:['狼牙刺','野枣树','荛花','杠柳'],
        cover:75,
        lng:109.9219444,
        lat:36.6041666,
        asl:910,
        slop:18,
        asp:'',
        
        },
          {id:3,
        position:Cesium.Cartesian3.fromDegrees(109.931944444444	,36.5741666666667,	940),
        vegetation:['野枣树','荛花','狼牙刺','草木樨状黄芪','焦蒿'],
        cover:56,
           lng:109.931944444444,
        lat:36.5741666666667,
        asl:940,
        slop:26,
        asp:'214西南',
        
        },
          {id:4,
        position:Cesium.Cartesian3.fromDegrees(109.9316667	,36.57361111	,910),
        vegetation:['狼牙刺','野枣树','荛花'],
        cover:73,
           lng:109.9316667,
        lat:36.57361111,
        asl:910,
        slop:26,
        asp:'227西南',
        
        },
          {id:5,
        position:Cesium.Cartesian3.fromDegrees(109.931111111111,	36.5727777777778,	890),
        vegetation:['荆条','野枣树'],
        cover:28,
           lng:109.931111111111,
        lat:36.5727777777778,
        asl:890,
        slop:0,
        asp:'',
        },
          {id:6,
        position:Cesium.Cartesian3.fromDegrees(110.037222222222	,36.4347222222222	,1190),
        vegetation:['锦鸡儿','黄刺玫','杜梨','丁香','水栒子','土状绣线菊'],
        cover:87,
           lng:110.037222222222,
        lat:36.4347222222222,
        asl:1190,
        slop:46,
        asp:'北坡',
        },
          {id:7,
        position:Cesium.Cartesian3.fromDegrees(110.037222222222	,36.435	,1190),
        vegetation: ['丁香','锦鸡儿','绣线菊','黄刺玫','黑栒子','水栒子'],
        cover:86,
           lng:110.037222222222,
        lat:36.435,
        asl:1190,
        slop:36,
        asp:'北坡',
        },
          {id:8,
        position:Cesium.Cartesian3.fromDegrees(110.036944444444	,36.435	,1184),
        vegetation: ['黑栒子','黄刺玫','锦鸡儿','丁香'],
        cover:73,
           lng:110.036944444444,
        lat:36.435,
        asl:1184,
        slop:34,
        asp:'北坡',
        },
          {id:9,
        position:Cesium.Cartesian3.fromDegrees(110.033611111111,	36.4391666666667	,1140),
        vegetation: ['杏树','灌木铁线莲','柳叶酥梨','丁香','狼牙刺','野枣树'],
        cover:78,
           lng:110.033611111111,
        lat:36.4391666666667,
        asl:1140,
        slop:35,
        asp:'西偏南',
        },
          {id:10,
        position:Cesium.Cartesian3.fromDegrees(110.033333333333,	36.4391666666667,	1140),
        vegetation:['柳叶酥梨','狼牙刺','灌木铁线莲','杠柳'],
        cover:76,
           lng:110.033333333333,
        lat:36.4391666666667,
        asl:1140,
        slop:37,
        asp:'西偏南',
        },
          {id:11,
        position:Cesium.Cartesian3.fromDegrees(110.033333333333	,36.4388888888889,	1130),
        vegetation: ['杠柳','狼牙刺','灌木铁线莲','柳叶酥梨'],
        cover:86,
             lng:110.033333333333,
        lat:36.4388888888889,
        asl:1130,
        slop:40,
        asp:'南偏西',
        },
          {id:12,
        position:Cesium.Cartesian3.fromDegrees(109.932777777778	,36.5177777777778	,970),
        vegetation:['丁香','黄刺玫','绣线菊','梨树'],
        cover:79,
           lng:109.932777777778,
        lat:36.5177777777778,
        asl:970,
        slop:42,
        asp:'',
        },
          {id:13,
        position:Cesium.Cartesian3.fromDegrees(109.9327778,36.51555556,950),
        vegetation:['丁香','牛奶子','柳叶酥梨'],
        cover:33,
          lng:109.9327778,
        lat:36.51555556,
        asl:950,
        slop:34,
        asp:'',
        },
          {id:14,
        position:Cesium.Cartesian3.fromDegrees(109.9333333,36.5175,920),
        vegetation:['黑栒子','黄刺玫','丁香','醉鱼草','延安锦鸡儿'],
        cover:67,
        lng:109.9333333,
        lat:36.5175,
        asl:920,
        slop:22,
        asp:'',
        },
          {id:15,
        position:Cesium.Cartesian3.fromDegrees(109.9197222,36.50305556,1000),
        vegetation:['荆条','狼牙刺','野枣树'],
        cover:68,
          lng:109.9197222,
        lat:36.50305556,
        asl:1000,
        slop:11,
        asp:'236西南',
        },
          {id:16,
        position:Cesium.Cartesian3.fromDegrees(109.9208333,36.50222222,940),
        vegetation: ['狼牙刺','荆条'],
        cover:37,
           lng:109.9208333,
        lat:36.50222222,
        asl:960,
        slop:18.5,
        asp:'334西北',
        
        },
          {id:17,
        position:Cesium.Cartesian3.fromDegrees(109.9216667,36.50166667,940),
        vegetation: ['荆条','杠柳','锦鸡儿','柳叶酥梨','丁香'],
        cover:31,
           lng:109.9216667,
        lat:36.50166667,
        asl:940,
        slop:11,
        asp:'154东南',
        
        },
          {id:18,
        position:Cesium.Cartesian3.fromDegrees(109.9144444,36.57694444,860),
        vegetation: ['荆条','锦鸡儿','丁香'],
        cover:65,
           lng:109.9144444,
        lat:36.57694444,
        asl:860,
        slop:17,
        asp:'北坡',
        
        },
          {id:19,
        position:Cesium.Cartesian3.fromDegrees(109.9147222,36.57694444,940),
        vegetation: ['荆条','丁香','杜梨','三角槭','锦鸡儿'],
        cover:92,
           lng:109.9147222,
        lat:36.57694444,
        asl:850,
        slop:45,
        asp:'334北坡',
        
        },
          {id:20,
        position:Cesium.Cartesian3.fromDegrees(109.9147222,36.57722222,840),
        vegetation: ['杏树','榆树','狼牙刺','野桃树'],
        cover:91,
        lng:109.9147222,
        lat:36.57722222,
        asl:840,      
        slop:27,
        asp:'326西北',
        
        },
          {id:21,
        position:Cesium.Cartesian3.fromDegrees(109.5141667,36.45277778,1210),
        vegetation: ['野桃树','狼牙刺','榆树'],
           lng:109.5141667,
        lat:36.45277778,
        asl:1210,
        slop:32,
        asp:'南坡',
        cover:'',
        },
          {id:22,
        position:Cesium.Cartesian3.fromDegrees(109.5141667,36.45277778,1200),
        vegetation: ['榆树','狼牙刺'],
         lng:109.5141667,
        lat:36.45277778,
        asl:1200,
        slop:22,
        asp:'南坡',
        cover:'',
        },
          {id:23,
        position:Cesium.Cartesian3.fromDegrees(109.5141667,36.4525,1180),
        vegetation: ['醉鱼草','延安锦鸡儿','结皮忍冬','黄刺玫','牛奶子','梨树'],
           lng:109.5141667,
        lat:36.62138889,
        asl:1180,
        slop:12,
        asp:'240西南',
        cover:'',
        },
          {id:24,
        position:Cesium.Cartesian3.fromDegrees(108.8644444,36.68055556,1570),
        vegetation:['土状绣线菊','黄刺玫','牛奶子','绣线菊'],
           lng:108.8644444,
        lat:36.68055556,
        asl:1570,
        slop:10,
        asp:'北坡',
        cover:'',
        },
          {id:25,
        position:Cesium.Cartesian3.fromDegrees(108.8644444,36.68083333,1560),
        vegetation: ['黄刺玫','柳叶酥梨'],
           lng:108.8644444,
        lat:36.68083333,
        asl:1560,
        slop:18,
        asp:'北坡',
        cover:'',
        },
          {id:26,
        position:Cesium.Cartesian3.fromDegrees(108.8641667,36.68111111,1560),
        vegetation: ['狼牙刺','醉鱼草','灌木铁线莲','杠柳'],
           lng:108.8641667,
        lat:36.68111111,
        asl:1560,
        slop:15,
        asp:'北坡', 
        cover:'', 
        },
          {id:27,
        position:Cesium.Cartesian3.fromDegrees(108.8641667,36.67833333,1570),
        vegetation: ['狼牙刺','醉鱼草','灌木铁线莲','杠柳'] ,
           lng:108.8641667,
        lat:36.67833333,
        asl:1570,
        slop:0,
        asp:'南坡',  
        cover:'',    
        },
           {id:28,
        position:Cesium.Cartesian3.fromDegrees(108.8638889,36.67777778,1550),
        vegetation: ['狼牙刺'] ,
           lng:108.8638889,
        lat:36.67777778,
        asl:1550,
        slop:5,
        asp:'南坡',  
        cover:'',    
        },
        ];   
            var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
            var that = this;
            handler.setInputAction(function(event){  
            var pick = that.viewer.scene.pick(event.position);
               if(Cesium.defined(pick))              // && (pick.id.id === 'green')
               {        //判断位置信息是否为空 && 当前所选定的对象id号是否和要弹窗的id号一致
                  that.$refs.infopopup.style.display = 'block'
                  that.$refs.infopopup.innerHTML = '<strong>基础信息:</strong><br /><br />位置：' + dataa[pick.id.id].lng + 'E,  '+ dataa[pick.id.id].lat +'N'+ ',<br />海拔：' +dataa[pick.id.id].asl+'m'+ '，<br />坡度：' +dataa[pick.id.id].slop+'°'+ '，<br />坡向：' +dataa[pick.id.id].asp+ '，<br />灌木：' +dataa[pick.id.id].vegetation+ ';<br />总盖度：'+dataa[pick.id.id].cover
                  console.log(pick);
                  // alert('采样点信息:\n位置：' + res.data[pick.id.id].lng + 'E,  '+ res.data[pick.id.id].lat +'N'+ ',\n海拔：' +res.data[pick.id.id].asl+'m'+ '，\n坡度：' +res.data[pick.id.id].slope+'°'+ '，\n坡向：' +res.data[pick.id.id].asp+ '，\n土壤类型：' +res.data[pick.id.id].classofsoil+ '，\n植被类型：' +res.data[pick.id.id].classofvegetation+ '，\n优势种：' +res.data[pick.id.id].dominantspecies+ '，\n备注：' +res.data[pick.id.id].remark);   //满足条件则弹窗


                 } else {
                  that.$refs.infopopup.style.display = 'none'
                  that.$refs.leftbox.style.display = 'none'
                  that.$refs.rightbox.style.display = 'none'
                 }
        
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);
        
      
      },




  },
  mounted() {
      this.initViewer()
      // this.initCharts()
      this.leftClick()
      this.addPoints()
    
    },
};
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  /* z-index: 1; */
  /* z-index: -1; */
}


.leftbox {
  display: none;
  position: absolute;
  margin-left: 2vh;
  width: 38%;
  height: 100%;
  left: 0px;
  flex-direction: column;
  flex-wrap: nowrap;
}
.myChart1{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  /* border: 1px solid red; */
    background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart2{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart3{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}

.rightbox {
  display: none;
  position: absolute;
  margin-right: 2vh;
  width: 38%;
  height: 100%;
  right: 0%;
  flex-direction: column;
  flex-wrap: nowrap;
}
.myChart4{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart5{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart6{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.infopopup{
  position: absolute;
  display: none;
  margin-top: 5vh;
  padding: 2%;
  border-radius:0.5rem;
  /* border-bottom-right-radius:0.6rem; */
  width: 15vw;
  left: 39.8%;
  z-index: 1;
  color: black;
  font-size: 2vh;
  background-color: white;
}
</style>